<#assign base = springMacroRequestContext.contextPath />
<html>
    <head>
        <title>FreeMarker demo</title>
        <style>
            ul li {
                float:left; /* 往左浮动 */
                list-style:none; /* 将默认的列表符号去掉 */
                padding:0; /* 将默认的内边距去掉 */
                margin:0; /* 将默认的外边距去掉 */
            }
            ul li a{
                display:block; /* 将链接设为块级元素 */
                padding:8px 10px; /* 设置内边距 */
                /*background:#3A4953; !* 设置背景色 *!*/
                color:red; /* 设置文字颜色 */
                text-decoration:none; /* 去掉下划线 */
                /*border-right:1px solid #000; !* 在左侧加上分隔线 *!*/
            }

        </style>
    </head>
    <body>
        <table border="1px solid #8968CD" style="border-collapse: collapse;">
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>年龄</th>
                <th>创建时间</th>
                <th>创建时间</th>
                <th>创建时间</th>
            </tr>
            <#if pageInfo.list?exists>
            <#list pageInfo.list as demo>
                <tr>
                    <td>${demo.id?if_exists}</td>
                    <td>${demo.name?if_exists}</td>
                    <td>${demo.age?if_exists}</td>
                    <td>${demo.createTime?date}</td>
                    <td>${demo.createTime?datetime}</td>
                    <td>${demo.createTime?string("yyyy-MM-dd HH:mm:ss")}</td>
                </tr>
            </#list>
            </#if>
        </table>
        <!--显示分页信息-->
        <div class="row">
            <!--文字信息-->
            <div class="col-md-6">
                当前第 ${pageInfo.pageNum} 页.总共 ${pageInfo.pages} 页.一共 ${pageInfo.total} 条记录
            </div>

            <!--点击分页-->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">

                        <li><a href="${base}/demo/queryDemoByPageOrderBy?pageNum=1">首页</a></li>

                        <!--上一页-->
                        <li>
                            <#if pageInfo.hasPreviousPage>
                                <a href="${base}/demo/queryDemoByPageOrderBy?pageNum=${pageInfo.pageNum-1}" aria-label="Previous">
                                    <span aria-hidden="true">«</span>
                                </a>
                            </#if>
                        </li>

                        <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                        <#list pageInfo.navigatepageNums as page_num>
                            <#if page_num == pageInfo.pageNum>
                                <li class="active"><a href="javascript:void(0);">${page_num}</a></li>
                            </#if>
                            <#if page_num != pageInfo.pageNum>
                                <li><a href="${base}/demo/queryDemoByPageOrderBy?pageNum=${page_num}">${page_num}</a></li>
                            </#if>
                        </#list>

                        <!--下一页-->
                        <li>
                            <#if pageInfo.hasNextPage>
                                <a href="${base}/demo/queryDemoByPageOrderBy?pageNum=${pageInfo.pageNum+1}"
                                   aria-label="Next">
                                    <span aria-hidden="true">»</span>
                                </a>
                            </#if>
                        </li>

                        <li><a href="${base}/demo/queryDemoByPageOrderBy?pageNum=${pageInfo.pages}">尾页</a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </body>
</html>